@charset "utf-8";
$fontSize:40;
@function r($p){
    @return $p/$fontSize*1rem ;
}
@function bfb($b){
    @return $b/1920*100%;
}
*{
     font-family:"century gothic";
}

@-webkit-keyframes fadeInLeft {
  from {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes fadeInLeft {
  from {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

.fadeInLeft {
  -webkit-animation-name: fadeInLeft;
  animation-name: fadeInLeft;
}



@-webkit-keyframes fadeInRight {
  from {
    opacity: 0;
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes fadeInRight {
  from {
    opacity: 0;
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

.fadeInRight {
  -webkit-animation-name: fadeInRight;
  animation-name: fadeInRight;
}

html,body{
    width: 100%;
    height: 100%;
   
}
.web_wrap{
    width: 100%;
}

header{
    width:100%;
    margin: 0 auto;
    background: #FFFFFF;
    position: fixed;
    z-index: 1000;
    .header{
        width: 96%;
        margin: 0 auto;
        background: #FFFFFF;
        padding-top: bfb(20);
        display: flex;
        justify-content: space-between;
        align-items: center;
    .drop_down{
        display: flex;
        justify-content: center;
        align-items: center;
        img{
            width:32px;
            cursor: pointer;
        }
    }
    .logo{
        display: flex;
        justify-content: center;
        align-items: center;
          
        .logo_i{
            width: 150px;
            -webkit-transition:all .2s;
            -moz-transition:all .2s;
            transition:all .2s;
            
        }
        .logo_b{
            width: 100px;
           
        }
    }
    .search{
        display: flex;
        justify-content: center;
        align-items: center;
        img{
            width: 28px;
            cursor: pointer;
        }
    }
    }
}
.small{
    width: 60%;
    height: 100px;
    .logo{
        img{
            width: 100px;
        }
    }
}
.web{
    width: 100%;
    padding-top: 124px;
}
.web_p{
    width: 100%;
    padding-top: 0px;
}
.footer{
    position: relative;
    .img{
        width: 100%;
        overflow: hidden;
        position: relative;
        img{
            display: block;
            width: 100%;
        }
        .mask{
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                background: rgba(000,000,000,.5);
                z-index: 1;
            }
    }
    
    
    .foot_con{
        position: absolute;
        z-index: 2;
        bottom: 0;
        left: 0;
        width: 100%;
        background: rgba(000,000,000,.6);
        .text{
            width:60%;
            margin: 0 auto;
            display: flex;
            justify-content: space-between;
            align-items: center;
            
            p{
                width: 90%;
                font-size:11px;
                color: #e2e1e1;
                letter-spacing: 1px;
                padding-top: 45px;
                padding-bottom: 46px;
               
            }
            a{
                color: #e2e1e1;
                font-size:18px;
            }
        }
    }
}
.popup{
    width:100%;
    height: 100%;
    position: fixed;
    z-index: 1001;
    top: 0;
    left: 0;
    top: 0;
    right: 0;
    margin: auto;
    display: none;
    background: #FFFFFF;
    .link{
        width: 96%;
        margin: 0 auto;
        height: 100%;
//      padding-top: 32px;
        display: flex;
        justify-content:space-around;
        align-items: center;
        flex-wrap: wrap;
        .link_img{
            width: 100%;
            text-align: center;
            height: 140px;
            display: flex;
            justify-content:center;
            align-items: center;
            img{
            margin:0 15px;
            }
            img:nth-of-type(1){
                width: 35px;
            }
            img:nth-of-type(2){
                width: 34px;
            }
            img:nth-of-type(3){
                width: 27px;
            }
            img:nth-of-type(4){
                width: 27px;
            }
        }
    }
    .close{
        position: absolute;
//      top: 60px;
        left: 28px;
        img{
            width: 20px;
        }
    }
    
    .nav{
        width: 100%;
        margin: 0 auto;
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
        .nav_link{
            display: flex;
            justify-content: center;
            flex-direction: column;
            a{
                display: flex;
                justify-content: center;
                align-items: center;
                font-size: 30px;
                padding-bottom: 30px;
                border-bottom:1px solid #b9b9b9;
                color: #000000;
                
                li{
                    padding-top: 30px;
                }
            }
        }
        .subnav{
            width:100%;
            display: flex;
            justify-content: center;
            align-items: center;
            padding-top: 50px;
            a{
                font-size: 20px;
                color: #000000;
                li::after{
                    content: "——";
                    padding:0 10px;
                }
            }
            a:first-of-type li::before{
                content: "——";
                padding-right: 10px;
            }
            
        }
    }
}
input{
    display: none;
}
#navBtn:checked+.popup{
    animation:fadeInLeft .5s forwards ;
    display: block;
}
.searchW{
    width:100%;
    height: 100%;
    position: fixed;
    z-index: 1001;
    top: 0;
    left: 0;
    top: 0;
    right: 0;
    margin: auto;
    display: none;
    background: #FFFFFF;
}
.searchb{
    width: 60%;
    height: 100%;
    margin: 100px auto 0;
    

.rebtn{
        position: absolute;
//      width: 100%;
        font-size: 20px;
        letter-spacing: 1px;
        color: #000000;
        display: block;
        z-index: 100;
        cursor: pointer;
        span{
            padding-right: 10px;
        }
}
.con{
    width: 80%;
    position: absolute;
    padding-top: 50%;
//  top:50%;
    left: 50%;
    transform: translate(-50%,-50%);
    input{
        display: block;
        font-size: 80px;
        width: 100%;
        text-align: center;
        border: 0;
        color: #b9b9b9;
        margin-bottom: 40px;
        }
        .text{
            text-align: center;
            font-size: 20px;
            letter-spacing: 1px;
        }
    }
}
#searBtn:checked+.searchW{
    animation:fadeInRight .5s forwards;
    display: block;
}

@media only screen and (max-width:768px){
    header{
    width:100%;
    margin: 0 auto;
    background: #FFFFFF;
    position: fixed;
    z-index: 1000;
    .header{
    width: 96%;
    margin: 0 auto;
    padding-top:bfb(32);
    display: flex;
    justify-content: space-between;
    align-items: center;
    .drop_down{
        display: flex;
        justify-content: center;
        align-items: center;
            img{
                width:20px;
                cursor: pointer;
            }
    }
    .logo{
        display: flex;
        justify-content: center;
        align-items: center;
        .logo_i{
            width: 74px;
        }
        .logo_b{
            width: 50px;
        }
    }
    .search{
        display: flex;
        justify-content: center;
        align-items: center;
        img{
            width:13px;
        }
    }
}
}
.web{
    width: 100%;
    padding-top: 60px;
}
.footer{
    width: 100%;
    position: relative;
    .img{
        width: 100%;
        overflow: hidden;
        position: relative;
        img{
            display: block;
            width: 100%;
        }
        .mask{
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                background: rgba(000,000,000,.5);
//              z-index: 1;
            }
    }
    .foot_con{
        z-index: 2;
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        background: rgba(000,000,000,.6);
        .text{
            width:60%;
            margin: 0 auto;
            display: flex;
            justify-content: space-between;
            align-items: center;
            
            p{
                width: 90%;
                font-size:8px;
                color: #e2e1e1;
                letter-spacing: 1px;
                padding-top: 10px;
                padding-bottom: 10px;
               
            }
            a{
                color: #e2e1e1;
                font-size:18px;
            }
        }
    }
}
.popup{
    width:100%;
//  height: 100%;
    position: fixed;
    z-index: 1001;
    background: #FFFFFF;
    top: 0;
    left: 0;
    top: 0;
    right: 0;
    margin: auto;
    display: none;
    .link{
        width: 96%;
        margin: 0 auto;
        height: 100%;
        display: flex;
        justify-content:space-around;
        align-items: center;
        flex-wrap: wrap;
        .link_img{
            width: 100%;
            text-align: center;
            height:50px;
            display: flex;
            justify-content:center;
            align-items: center;
            img{
            margin:0 15px;
            }
            img:nth-of-type(1){
                width: 25px;
            }
            img:nth-of-type(2){
                width: 24px;
            }
            img:nth-of-type(3){
                width: 17px;
            }
            img:nth-of-type(4){
                width: 17px;
            }
        }
    }
    .close{
        position: absolute;
        top: 18px;
        left: 7px;
        img{
            width: 20px;
        }
    }
    
    .nav{
        width: 100%;
        margin: 0 auto;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-wrap: wrap;
        .nav_link{
            display: flex;
            justify-content: center;
            flex-direction: column;
            a{
                display: flex;
                justify-content: center;
                align-items: center;
                font-size: 18px;
                padding-bottom: 30px;
                border-bottom:1px solid #b9b9b9;
                color: #000000;
                
                li{
                    padding-top: 30px;
                }
            }
        }
        .subnav{
            width:100%;
            display: flex;
            justify-content: center;
            align-items: center;
            padding-top: 30px;
            a{
                font-size: 12px;
                color: #000000;
                li::after{
                    content: "——";
                    padding:0 10px;
                }
            }
            a:first-of-type li::before{
                content: "——";
                padding-right: 10px;
            }
            
        }
    }
}
.searchW{
    width:100%;
    height: 100%;
    position: fixed;
    z-index: 1001;
    top: 0;
    left: 0;
    top: 0;
    right: 0;
    margin: auto;
    display: none;
    background: #FFFFFF;
}
.searchb{
    width: 80%;
    height: 100%;
    margin: 30px auto 0;
    

.rebtn{
        font-size: 12px;
        letter-spacing: 1px;
        color: #000000;
        display: block;
        span{
            padding-right: 10px;
        }
}
.con{
    width: 80%;
    position: absolute;
    padding-top:100%;
//  top:50%;
    left: 50%;
    transform: translate(-50%,-50%);
    input{
        font-size:40px;
        width: 100%;
        text-align: center;
        border: 0;
        color: #b9b9b9;
        margin-bottom: 20px;
        }
        .text{
            text-align: center;
            font-size:12px;
            letter-spacing: 1px;
        }
}
}
}
